<template>
<div class="row">
  <my-subtitle-detail></my-subtitle-detail>
  <div class="col-md-12">
    <my-navbar fixed="top">
      <template slot="left"> 
        <validator name="form">
          <span class="control-label">{{$t("webapp.deviceIp")}}</span>
          <input type="text" class="form-control" v-model="deviceIp" v-validate:ipaddr="{ip: true}">
          <button type="button" class="btn btn-default" @click.prevent="onConnect">{{$t("common.connect")}}</button>
        </validator>
      </template>
    </my-navbar>
  </div>
  <div class="col-md-12" v-if="connect">
    <p class="form-control-static text-center lead">
      <strong>{{module.title}}</strong>
    </p>
    <my-table :cfg="cfg" :list="list" :state="false"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import async from 'async'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import locales from './locales.js'
import {codeMsg} from 'libs/api.js'
import debugCfg from 'share/debugCfg.js'
import store from 'share/codec/vuex/store.js'
import * as actions from 'share/codec/vuex/actions.js'
import {setHostname, http, multimediaApi} from 'share/codec/api.js'

export default{
  locales,
  store,
  vuex: {
    getters: {
      platform: (state) => state.platform,
      subtitleListOfVpOut: (state) => state.multimedia.subtitleListOfVpOut,
      subtitleListOfWindow: (state) => state.multimedia.subtitleListOfWindow
    },
    actions
  },
  computed: {
    list () {
      if (this.module.listName === 'subtitleListOfVpOut') {
        return this.subtitleListOfVpOut
      } else {
        return this.subtitleListOfWindow
      }
    },
    module () {
      return _.find(this.moduleOptions, {devType: this.platform.devType})
    }
  },
  data: function(){
    return {
      deviceIp: '',
      connect: false,
      moduleOptions: [{
        devType: 'decoder',
        listName: 'subtitleListOfVpOut',
        title: this.$t('webapp.subtitleOfVpOut'),
        getList: this.getSubtitleOfVpOut,
      }, {
        devType: 'encoder',
        listName: 'subtitleListOfWindow',
        title: this.$t('webapp.subtitleOfWindow'),
        getList: this.getSubtitleOfWindow,
      }],
      cfg: {
        checkable: false,
        showHead: true,
        columns: [{
          field: '_id',
          name: 'ID',
          width: '5%'
        }, {
          field: 'enable',
          name: this.$t("common.enable"),
          width: '5%'
        }, {
          field: 'fontSize',
          name: this.$t("webapp.fontsize"),
          width: '10%'
        }, {
          field: 'fontColorShow',
          name: this.$t("webapp.color"),
          width: '15%'
        }, {
          field: 'type',
          name: this.$t("webapp.type"),
          width: '20%'
        }, {
          field: 'content',
          name: this.$t("webapp.content"),
          width: '30%'
        }],
        operation: {
          name: this.$t("common.detail"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-edit',
            doClick: this.doShowDetail
          }]
        }
      }
    }
  },
  methods: {
    stepGetPlatformInfo (cb) {
      let ctx = this
      this.getPlatformInfo({
        success () {
          cb(null)
        },
        error (data) {
          cb(codeMsg(ctx, data))
        },
        noResponse () {
          cb({msg: ctx.$t('error.noResponse')})
        }
      })
    },
    stepLogin (cb) {
      http("/api/auth/login", "POST", {
        username: 'api',
        password: 'api'        
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          cb && cb(null)
        } else {
          cb && cb(codeMsg(this, res.data))
        }
      }.bind(this), function(res) {
        cb && cb({msg: 'error'})
      })
    },
    stepLoadList (cb) {
      this.module.getList()
      cb && cb(null)
    },  
    onConnect(){
      this.connect = false
      if (this.$form.invalid) {
        toast.e(this, this.$t('common.fail'), this.$t('error.params'))
        return
      }
      setHostname(this.deviceIp)
      async.waterfall([
        this.stepGetPlatformInfo,
        this.stepLogin,
        this.stepLoadList
        ], 
        function (err) {
          if (err) {
            toast.e(this, this.$t('common.fail'), err.msg)
          } else {
            this.connect = true
          }
        }.bind(this)
      )
    },
    doShowDetail(item) {
      ebus.emit('show-subtitle-detail', item)
    },
    onSaveSubtitle(req) {
      multimediaApi.setItem(this.module.listName, req).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          this.module.getList()
        } else {
          toast.e(this, this.$t('common.fail'), this.$t('error.code'), {code: res.data.code})
        }
      }.bind(this))
    }
  },
  ready () {
    if (debugCfg.debugOn) {
      this.deviceIp = debugCfg.devIp1
    }
    ebus.on('save-subtitle', this.onSaveSubtitle)
  }
}

</script>

<style>
body {    
  padding: 50px;
  padding-top: 35px;
}
</style>